<template>
    <div>
        <Modal
         title="修改订单"
         :value="value"
         :width="50"
         @on-ok="save"
         @on-visible-change="visibleChange"
         :mask-closable="false"
        >
            <Form :ref="formRef" :rules="rules" :model="model" :label-width="100">
                <p strong pd2>收货人信息</p>
                <FormItem label="姓名" prop="persoName">
                    <Input v-model="model.personName" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem>
                <FormItem label="手机" prop="phoneNumber">
                    <Input v-model="model.phoneNumber" size="small" :maxlength="32" :minlength="2" w10 />
                </FormItem>
                <FormItem label="地址" prop="county">
                    <address-select v-model="model" size="small"></address-select>
                </FormItem>
                <FormItem label="详细地址" prop="detailedAddress">
                    <Input v-model="model.detailedAddress" size="small" type="textarea" :rows="4" />
                </FormItem>
                <p strong pd2>配送信息</p>
                <FormItem label="配送方式" prop="shippingTemplateId">
                    <shipping-template-select v-model="model" size="small"></shipping-template-select>
                </FormItem>
                <p strong pd2>价格调整</p>
                <FormItem label="涨价或降价">
                    <InputNumber v-model="model.adjustmentAmount" size="small"  />
                </FormItem>
                <Divider />
                <FormItem label="买家留言">
                    <Input v-model="theOrder.info.remark" size="small" type="textarea" :rows="4" disabled />
                </FormItem>
                <FormItem label="订单备注" prop="adminRemark">
                    <Input v-model="model.adminRemark" size="small" type="textarea" :rows="4" />
                </FormItem>
            </Form>
            <div bd-gray4 pd1 text-right>
                <p red>仅供参考，实际计算值以保存后为准</p>
                <p><span>订单总金额</span><span w5 right>￥ {{formatPrice(theOrder.info.commodityTotalAmount)}}</span></p>
                <p><span>运费</span><span w5 right>￥ {{formatPrice(model.freightAmount)}}</span></p>
                <p><span>优惠金额</span><span w5 right>￥ {{formatPrice(theOrder.info.couponAmount + theOrder.info.xpAmount)}}</span></p>
                <p><span>调整金额</span><span w5 right>￥ {{formatPrice(model.adjustmentAmount)}}</span></p>
                <p><span>实付金额</span><span w5 right>￥ {{formatPrice(finalAmount)}}</span></p>
                <p><span>赠送积分</span><span w5 right>￥ {{formatPrice(theOrder.info.bounsXPValue)}}</span></p> </div>
            <div slot="footer">
                <Button @click="save" type="primary">保存</Button>
                <Button @click="cancel">取消</Button>
            </div>
        </Modal>
    </div>
</template>
<script lang="ts">
import { Component, Vue,Inject, Prop,Watch } from 'vue-property-decorator';
import Util from '../../lib/util'
import AbpBase from '../../lib/abpbase'
import AddressSelect from '../../components/common/address-select.vue'
import ShippingTemplateSelect from '../../components/common/shipping-template-select.vue'

@Component({
    components: { AddressSelect, ShippingTemplateSelect }
})
export default class OrderUpdate extends AbpBase{
    @Prop({type:Boolean,default:false}) value:boolean;
    @Prop() order:any;
    get theOrder() {
        return this.order || {
            info: {}
        }
    }
    formRef = Date.now() + '-order-update';
    model:any = {
        orderNumber: "",
        personName: "",
        phoneNumber: "",
        province: "",
        city: "",
        county: "",
        detailedAddress: "",
        adjustmentAmount: 0,
        shippingTemplateId: 0,
        freight: 0,
        paymentType: 0,
        paymentMethod: 0,
        isPaid: true,
        adminRemark: ""
    }
    rules = {
        name:[{required: true,message:"请添加商品名称",trigger: 'blur'}]
    }
    get finalAmount() {
        var info = this.theOrder.info;
        var model = this.model;
        return info.commodityTotalAmount - info.couponAmount - info.xpAmount + model.adjustmentAmount + model.freightAmount
    }
    save(){
        (this.$refs[this.formRef] as any).validate(async (valid:boolean)=>{
            if(valid){
                let response = await this.put("AdminOrderManager/Update", this.model);
                if(response.success) {
                    this.success('修改成功');
                    this.$emit('save-success');
                    this.$emit('input',false);
                }
            }
        })
    }
    cancel(){
        (this.$refs[this.formRef] as any).resetFields();
        this.$emit('input',false);
    }
    visibleChange(value:boolean) {
        if(!value){
            this.$emit('input',value);
        }
    }
    orderToModel() {
        var o = this.order;
        if(o == null) return;
        this.model = {
            orderNumber: o.orderNumber,
            personName: o.shipInfo.personName,
            phoneNumber: o.shipInfo.phoneNumber,
            province: o.shipInfo.province,
            city: o.shipInfo.city,
            county: o.shipInfo.county,
            detailedAddress: o.shipInfo.detailedAddress,
            adjustmentAmount: o.info.adjustmentAmount,
            shippingTemplateId: o.shipInfo.shippingTemplateId,
            freightAmount: o.info.freightAmount,
            // paymentType: o.paymentType.paymentType,
            // paymentMethod: o.paymentInfo.paymentMethod,
            // isPaid: true,
            adminRemark: o.info.adminRemark
        }
    }
    @Watch('order')
    onOrderChange() {
        this.orderToModel();
    }
    created() {
        this.orderToModel();
    }
}
</script>